<!-- include plupload scripts -->
	<script language="JavaScript" src="{{baseurl}}system/js/plupload/plupload.full.js" type="text/javascript"></script>


<script type="text/javascript">
	/*dojo.require("dojox.form.uploader.FileList");*/

	var file_upload_changes_{{field.uid}} = {'add': {}, 'remove': {}, 'order': {} };
	
	// create uploader and list
		var uploader_{{field.uid}};
		var filelist_{{field.uid}};

	dojo.ready(function(){
		// create objects
			
			//uploader_{{field.uid}} = new dojox.form.Uploader({multiple:true, uploadOnSelect:true, url:"{%block upload_url%}{{baseurl}}system/dojo/upload/file/{%endblock upload_url%}"});			
			filelist_{{field.uid}} = new Mozajik.FileList("{{field.id}}-filelist");

			var uploader_{{field.uid}} = new plupload.Uploader({
				runtimes : 'html5,flash,html4',
				browse_button : '{{field.uid}}-pickfiles',
				max_file_size : '100mb',
				url : '{% block upload_url %}{{baseurl}}system/plupload/upload/file/{% endblock upload_url %}',
				flash_swf_url : '{{baseurl}}js/plupload/plupload.flash.swf'
			});

				/*filters : [
					{title : "Image files", extensions : "jpg,gif,png"},
					{title : "Zip files", extensions : "zip"}
				]*/
				//resize : {width : 320, height : 240, quality : 90}

			
		// Add event to upload files button
			uploadgo_{{field.uid}} = function(){
				uploader_{{field.uid}}.start();
			};
		// Add uploader events		
			uploader_{{field.uid}}.bind('Init', function(up, params){
				zaj.log("Uploader initialized. Runtime: " + params.runtime);
			});
			uploader_{{field.uid}}.bind('FilesAdded', function(up, files) {
				dojo.forEach(files, function(file) {
					filelist_{{field.uid}}.add_file(file.name+' ('+plupload.formatSize(file.size)+') <b id="'+file.id+'-percent"></b>', file.id, false);
					//$('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b id="'+file.id+'-percent"></b>' + '</div>';
				});
				// start upload in a few seconds
				setTimeout("uploadgo_{{field.uid}}()", 300 ); 				
			});			
			uploader_{{field.uid}}.bind('UploadProgress', function(up, file) {
				$(file.id + "-percent").innerHTML = file.percent + "%";
			});
			uploader_{{field.uid}}.bind('Error', function(up, err) {
				zaj.alert("Error: " + err.code +", Message: " + err.message + (err.file ? ", File: " + err.file.name : ""));
				up.refresh(); // Reposition Flash/Silverlight
			});
			uploader_{{field.uid}}.bind('FileUploaded', function(up, file, result) {
				$(file.id + "-percent").innerHTML = "100%";
				var res = dojo.fromJson(result.response);
				// add to list
					$(file.id).id = res.id;
					$('remove-'+file.id).id = 'remove-'+res.id;
					//filelist_{{field.uid}}.add_file(res.name, res.id, true);
				// add to object
					file_upload_changes_{{field.uid}}['add'][res.id] = res.id;
					dojo.byId("{{field.id}}").value = dojo.toJson(file_upload_changes_{{field.uid}});
			});		
		// Run init
			uploader_{{field.uid}}.init();
		
		// add existing files to filelist
			{% if field.value %}
				{% foreach field.value as photo %}
					filelist_{{field.uid}}.add_file("{{photo.name|escape:'js'}}", "{{photo.id}}", false);
				{% endfor %}
			{% endif %}

		// add events to filelist
			dojo.connect(filelist_{{field.uid}}, "onRemove", function(id){
				// Make sure to unset if it exists in add
					delete file_upload_changes_{{field.uid}}['add'][id];
				// Add to remove
					file_upload_changes_{{field.uid}}['remove'][id] = id;
				// Recalc json
					dojo.byId("{{field.id}}").value = dojo.toJson(file_upload_changes_{{field.uid}});
			});
		
	});
	//http://dojotoolkit.org/reference-guide/dojox/form/Uploader.html
</script>

<a id="{{field.uid}}-pickfiles" class="icon tiny add left" style="cursor: pointer;" href="#">Browse...</a>
<br/>
<div id="{{field.id}}-uploadbutton"></div>
<div id="{{field.id}}-errors"></div>
<div id="{{field.id}}-filelist">
</div>
<input type="hidden" name="{{field.name}}" id="{{field.id}}">
<br/>